<html
    xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:p="http://primefaces.org/ui" xmlns:c="http://java.sun.com/jsp/jstl/core">

    <ui:composition template="layout.xhtml">

        <ui:define name="title">
            Cliente
        </ui:define>

        <ui:define name="breadcrumb">
            <div class="breadcrumb_divider"></div>
            <a href="pesquisarCliente.xhtml">Cliente</a>
            <div class="breadcrumb_divider"></div>
            <a class="current">Pesquisar</a>
        </ui:define>

        <ui:define name="sidebar">
            <h3>Cliente</h3>
            <ul class="toggle">
                <li class="icn_new_article"><a href="criarCliente.xhtml">Cadastrar</a></li>
                <li class="icn_search"><a href="pesquisarCliente.xhtml">Pesquisar</a></li>
            </ul>
        </ui:define>

        <ui:define name="content">           
            <h:form id="reconhecimentoForm">

                <p:messages id="reconhecimentoMsg" autoUpdate="true" />

                <p:fieldset legend="Dados" id="dadosFieldset">
                    <p:panel id="pessoaFisicaPanel" styleClass="noborder"
                             rendered="#{ managerReconhecimentoFirma.pessoa.tipoPessoa eq 'FISICA' }">
                        <div class="row">
                            <div class="column2">
                                <p:outputLabel value="Nome" for="nomeInputText" />
                            </div>
                            <div class="column10">
                                <p:inputText id="nomeInputText" value="#{ managerReconhecimentoFirma.pessoa.nome }"
                                             readonly="true" required="true" requiredMessage="Nome é obrigatório" />
                            </div>
                        </div>
                        <div class="row">
                            <div class="column2">
                                <p:outputLabel value="CPF" for="cpfInputMask" />
                            </div>
                            <div class="column3">
                                <p:inputMask id="cpfInputMask" value="#{ managerReconhecimentoFirma.pessoa.cpf  }"
                                             mask="999.999.999-99"  readonly="true" />
                            </div>                             

                            <div class="column2">
                                <p:outputLabel value="RG" for="rgInputText" />
                            </div>
                            <div class="column3">
                                <p:inputText id="rgInputText"  readonly="true" value="#{ managerReconhecimentoFirma.pessoa.rg  }" />
                            </div>   
                        </div>

                        <div class="row">
                            <div class="column2">
                                <p:outputLabel value="Data de Nascimento" />
                            </div>
                            <div class="column3">
                                <p:calendar id="dataVigorCalendar" readonly="true"  value="#{ managerReconhecimentoFirma.pessoa.dataNascimento }"
                                            showOn="button" pattern="dd/MM/yyyy" locale="pt" navigator="true" yearRange="1900:c+10" />
                            </div>

                            <div class="column2">
                                <p:outputLabel value="Estado Civil" for="estadoCivilSelectOneMenu" />
                            </div>
                            <div class="column3">
                                <p:selectOneMenu id="estadoCivilSelectOneMenu" disabled="true" value="#{ managerReconhecimentoFirma.pessoa.estadoCivil }">
                                    <f:selectItems value="#{ enums.estadosCivis() }" />
                                </p:selectOneMenu>
                            </div>                            
                        </div>

                        <div class="row">
                            <div class="column2">
                                <p:outputLabel value="Sexo" for="sexoSelectOneRadio" />
                            </div>
                            <div class="column3">
                                <p:selectOneRadio id="sexoSelectOneRadio" disabled="true" value="#{ managerReconhecimentoFirma.pessoa.sexo }">
                                    <f:selectItems value="#{ enums.sexos() }" />
                                </p:selectOneRadio>
                            </div>

                            <div class="column2">
                                <p:outputLabel value="Profissão" for="profissaoInputText" />
                            </div>
                            <div class="column3">
                                <p:inputText id="profissaoInputText"  readonly="true"  value="#{ managerReconhecimentoFirma.pessoa.profissao  }" />
                            </div>
                        </div>

                    </p:panel>

                    <p:panel id="dadosPessoaJuridica" styleClass="noborder"
                             rendered="#{managerReconhecimentoFirma.pessoa.tipoPessoa eq 'JURIDICA'}">
                        <div class="row">
                            <div class="column2">
                                <p:outputLabel value="Nome Fantasia" for="nomeFantasiaInputText" />
                            </div>
                            <div class="column10">
                                <p:inputText id="nomeFantasiaInputText"  readonly="true"  value="#{ managerReconhecimentoFirma.pessoa.nome }"
                                             required="true" requiredMessage="Nome Fantasia é obrigatório" />                                
                            </div>
                        </div>

                        <div class="row">    
                            <div class="column2">
                                <p:outputLabel value="Razão Social" for="razaoSocialInputText" />
                            </div>
                            <div class="column10">
                                <p:inputText id="razaoSocialInputText"  readonly="true"  value="#{ managerReconhecimentoFirma.pessoa.razaoSocial }"
                                             required="true" requiredMessage="Razão é obrigatório" />
                            </div>
                        </div>

                        <div class="row">
                            <div class="column2">
                                <p:outputLabel value="CNPJ" for="cnpjInputMask" />
                            </div>
                            <div class="column5">
                                <p:inputMask id="cnpjInputMask"  readonly="true" value="#{ managerReconhecimentoFirma.pessoa.cnpj  }"
                                             required="true" requiredMessage="CNPJ é obrigatório" mask="99.999.999/9999-99" />                                
                            </div>
                        </div>                        
                        <div class="row">
                            <div class="column2">
                                <p:outputLabel value="Responsável" for="responsavelInputText" />
                            </div>
                            <div class="column5">
                                <p:inputText id="responsavelInputText" readonly="true"  value="#{ managerReconhecimentoFirma.pessoa.responsavel  }" />
                            </div>
                            <div class="column1">
                                <p:outputLabel value="Email" for="emailInputText" />
                            </div>
                            <div class="column4">
                                <p:inputText id="emailInputText" readonly="true"  value="#{ managerReconhecimentoFirma.pessoa.email  }"/>
                            </div>
                        </div>
                    </p:panel>

                </p:fieldset>

                <p:fieldset legend="Endereço" collapsed="true" toggleable="true">

                    <div class="row">
                        <div class="column2">
                            <p:outputLabel value="Tipo do endereço" for="tipoEnderecoInputText" />
                        </div>
                        <div class="column3">
                            <p:selectOneMenu id="tipoEnderecoInputText" disabled="true" value="#{ managerReconhecimentoFirma.endereco.tipo  }">
                                <f:selectItems value="#{ enums.tiposEndereco() }" />
                            </p:selectOneMenu>
                        </div>
                    </div>

                    <div class="row">
                        <div class="column2">
                            <p:outputLabel value="Tipo do logradouro" for="tipoLogradouroInputText" />
                        </div>
                        <div class="column3">
                            <p:selectOneMenu id="tipoLogradouroInputText" disabled="true" value="#{ managerReconhecimentoFirma.endereco.tipoLogradouro  }">
                                <f:selectItems value="#{ enums.tiposLogradouro() }" />
                            </p:selectOneMenu>
                        </div>
                        <div class="column2">
                            <p:outputLabel value="Localidade" for="localidadeInputText" />
                        </div>
                        <div class="column5">
                            <p:inputText id="localidadeInputText" readonly="true"  value="#{ managerReconhecimentoFirma.endereco.localidade }"/>
                        </div>
                    </div>

                    <div class="row">
                        <div class="column2">
                            <p:outputLabel value="Número" for="numeroInputText" />
                        </div>
                        <div class="column3">
                            <p:inputText id="numeroInputText" readonly="true"  value="#{ managerReconhecimentoFirma.endereco.numero  }"/>
                        </div>

                        <div class="column2">
                            <p:outputLabel value="Logradouro" for="logradouroInputText" />
                        </div>
                        <div class="column5">
                            <p:inputText id="logradouroInputText"  readonly="true" value="#{ managerReconhecimentoFirma.endereco.logradouro }" />
                        </div>
                    </div>

                    <div class="row">
                        <div class="column2">
                            <p:outputLabel value="Bairro" for="bairroInputText" />
                        </div>
                        <div class="column3">
                            <p:inputText id="bairroInputText" readonly="true"  value="#{ managerReconhecimentoFirma.endereco.bairro }" />
                        </div>

                        <div class="column2">
                            <p:outputLabel value="CEP" for="cepInputMask" />
                        </div>
                        <div class="column5">
                            <p:inputMask id="cepInputMask" readonly="true"  value="#{ managerReconhecimentoFirma.endereco.cep  }"
                                         mask="99.999-999" />
                        </div>
                    </div>

                    <div class="row">
                        <div class="column2">
                            <p:outputLabel value="Cidade"/>
                        </div>
                        <div class="column3">
                            <p:inputText  readonly="true" value="#{ managerReconhecimentoFirma.endereco.cidade.nome }" />
                        </div>
                    </div>

                </p:fieldset>

                <p:fieldset id="firmasfield" legend="Firma" >
                    <div class="row" style="display: #{ empty managerReconhecimentoFirma.firmas ? 'block':'none'};">
                        <div class="column12">
                            <h:outputText value="Não há firma aberta" rendered="#{ empty managerReconhecimentoFirma.firmas}"/>
                        </div>
                    </div>
                    <div class="row">
                        <div class="column8">
                            <p:button outcome="criarFirma.xhtml?pessoaId=#{managerReconhecimentoFirma.pessoa.id}" 
                                      value="Abrir #{empty managerReconhecimentoFirma.firmas ? '':'nova' } Firma" icon="ui-icon-plus" style="margin-top: -80px;"                                        
                                      styleClass="ui-primary-priority"/>
                        </div>
                    </div>
                    <div class="clear"/>

                    <p:tabView orientation="left" rendered="#{ !empty managerReconhecimentoFirma.firmas}" 
                               value="#{  managerReconhecimentoFirma.firmas}" var="firmas">
                        <p:tab>
                            <f:facet name="title">
                                <h:outputText value="Fichas de Assinatura - " />
                                <h:outputText value="#{firmas.criadoEm}">
                                    <f:convertDateTime pattern="dd/MM/yyyy"/>
                                </h:outputText>
                            </f:facet>

                            <p:panel styleClass="row" header="Assinaturas"  >


                                <div class="column8, right" style="margin-top: -80px;">

                                    <p:commandButton value="Reconhecer Firma" icon="ui-icon-tag" 
                                                     disabled="#{firmas.bloqueado}"
                                                     styleClass="ui-priority-primary"/>

                                    <p:splitButton value="Opções" >
                                        <p:menuitem  value="#{firmas.bloqueado ? 'Desbloquear ':'Bloquear '}Firma" icon="ui-icon-close" 
                                                     update="@form, :reconhecimentoForm:firmasfield" process="@form"
                                                     actionListener="#{managerReconhecimentoFirma.bloquearFirma(firmas)}"/>
                                        <p:menuitem  value="Excluir Firma" icon="ui-icon-trash" update="@form, :reconhecimentoForm:firmasfield" process="@form"
                                                     actionListener="#{managerReconhecimentoFirma.excluirFirma(firmas)}" />
                                    </p:splitButton>
                                </div>

                                <div aria-live="polite" class="ui-messages ui-widget" style="display: #{firmas.bloqueado ? 'block':'none'}">
                                    <div class="ui-messages-error ui-corner-all">
                                        <span class="ui-messages-error-icon"></span>
                                        <ul><li>
                                                <span class="ui-messages-error-summary">
                                                    Assinatura Bloqueada em
                                                    <h:outputText value="#{firmas.dataBloqueado}">
                                                        <f:convertDateTime pattern="dd/MM/yyyy HH:mm:ss"/>
                                                    </h:outputText>      
                                                </span></li></ul>
                                    </div>
                                </div>

                                <ui:repeat value="#{  firmas.fichasAssinatura }" var="ficha">

                                    <p:panel styleClass="thumbnail" >
                                        <h:outputLink
                                            value="#{  ficha.tipo ne 'application/pdf' ? 'viewImage.xhtml' : 'show'  }" 
                                            title="#{  ficha.nomeExibicao  }"  target="_blank">

                                            <p:graphicImage rendered="#{  managerImagem.imagem(ficha)  }"
                                                            url="#{  managerImagem.urlThumbnailImagem(ficha)  }" />
                                            <p:outputLabel styleClass="nome_anexo" value="#{  managerImagem.nomeAnexo(ficha)  }"
                                                           rendered="#{  managerImagem.imagem(ficha)  }"/>
                                            <p:graphicImage height="100" width="100" rendered="#{  managerImagem.PDF(ficha)  }" 
                                                            url="#{  managerImagem.urlPDF  }" />
                                            <p:outputLabel value="#{  managerImagem.nomeAnexoPdf(ficha)  }" 
                                                           rendered="#{  managerImagem.PDF(ficha)  }"/>
                                            <f:param name="annex" value="#{ managerImagem.urlVisualziarImagem(ficha) }"/>

                                        </h:outputLink>

                                    </p:panel>
                                </ui:repeat>
                            </p:panel>
                            <p:panel styleClass="row" header="Anexo">
                                <ui:repeat value="#{  firmas.anexos }" var="ficha">
                                    <p:panel styleClass="thumbnail" >
                                        <h:outputLink
                                            value="#{  ficha.tipo ne 'application/pdf' ? 'viewImage.xhtml' : 'show'  }" 
                                            title="#{  ficha.nomeExibicao  }"  target="_blank">

                                            <p:graphicImage rendered="#{  managerImagem.imagem(ficha)  }"
                                                            url="#{  managerImagem.urlThumbnailImagem(ficha)  }" />
                                            <p:outputLabel styleClass="nome_anexo" value="#{  managerImagem.nomeAnexo(ficha)  }"
                                                           rendered="#{  managerImagem.imagem(ficha)  }"/>
                                            <p:graphicImage height="100" width="100" rendered="#{  managerImagem.PDF(ficha)  }" 
                                                            url="#{  managerImagem.urlPDF  }" />
                                            <p:outputLabel value="#{  managerImagem.nomeAnexoPdf(ficha)  }" 
                                                           rendered="#{  managerImagem.PDF(ficha)  }"/>
                                            <f:param name="annex" value="#{ managerImagem.urlVisualziarImagem(ficha) }"/>

                                        </h:outputLink>

                                    </p:panel>
                                </ui:repeat>
                            </p:panel>
                        </p:tab>
                    </p:tabView>



                </p:fieldset>


            </h:form>
        </ui:define>
    </ui:composition>

</html>